<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>代理管理</el-breadcrumb-item>
			<el-breadcrumb-item>提现审核（超级管理）</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="whole-flex-center-between whole-top-handle">
		    <div class="">
		        <el-button size="small" @click="clearFilter" style="margin-right:20px">重置所有筛选</el-button>
		        <el-select size="small" v-model="condition.status" style="margin-right:5px" placeholder="选择订单状态">
		            <el-option label="待打款" :value="0"></el-option>
		            <el-option label="已打款" :value="1"></el-option>
		        </el-select>
		        <el-input class="input-w" size="small" v-model="condition.agentID" placeholder="代理id" clearable></el-input>
		        <el-button size="small" @click="getList()">查询</el-button>
		    </div>
		</div>
		<el-table :data="showData" style="width: 100%">
			<el-table-column prop="id" label="id" width="180">
			</el-table-column>
			<el-table-column prop="agent.name" label="代理名称" width="150">
			</el-table-column>
			<el-table-column prop="money" align="center" label="提现金额">
			</el-table-column>
			<el-table-column prop="note" align="center" label="备注">
			</el-table-column>
			<el-table-column prop="status" label="提现状态">
				<template slot-scope="scope">
					<span v-if="scope.row.status === 0">待打款</span>
					<span v-else-if="scope.row.status === 1">已打款</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
			<el-table-column prop="update_time" label="时间">
			</el-table-column>
			<el-table-column align="center" label="操作">
				<template slot-scope="scope">
				    <el-button size="mini" @click="remit(scope.row.id,scope.row.status)">打款</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="whole-pagination">
			<el-pagination background layout="prev, pager, next" :total="count" @current-change="changePage">
			</el-pagination>
		</div>
		<div>
			<el-dialog
			  title="打款备注"
			  :visible.sync="dialogVisible"
			  width="30%">
			 <el-input
			   placeholder="请输入内容"
			   v-model="note"
			   clearable>
			 </el-input>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="confirm">确定打款</el-button>
			  </span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				condition : {
					agentID: '',
					status : 0
				},
				
				limit: 10,
				count: 0,
				showData: [],
				dialogVisible :false,
				drawalID : 0,
				note : '',
				status : 0
			}
		},
		created() {
			this.getData(1);
		},
		methods: {
			getData(page) {
				let that = this;
				that.$axios({
					url: '/admin/agent/getDrawal',
					method: 'POST',
					data: {
						agentID: that.condition.agentID,
						status: that.condition.status,
						offset: page,
						limit: that.limit,
					},
					success(res) {
						if (res.data.code == 200) {
							that.showData = res.data.content.data;
							that.count = res.data.content.count;
						} else {
							that.$message(res.data.msg);
						}
					}
				});
			},
			getList(){
				this.getData(1);
			},
			remit(id,status){
				this.drawalID = id;
				this.status = status;
				this.dialogVisible = true
			},
			confirm(){
				let that = this;
				if(that.status ==1){
					that.dialogVisible = false;
					that.$message({
						message : '请勿重复打款',
						type : 'warning'
					});
				}else{
					that.$axios({
						url : '/admin/agent/remit',
						method : 'POST',
						data : {
							status : 1,
							id : that.drawalID,
							note : that.note
						},
						success(res){
							that.dialogVisible = false;
							that.$message({
								message : res.data.msg,
								type : 'success'
							});
						}			
					});
				}
			},
			changePage(page) {
				this.getData(page);
			},
			clearFilter(){
				this.condition = {
					agentID: '',
					status : 0
				};
				this.getData(1);
			}
		}
	}
</script>
<style type="text/css">
	.input-w {
	    width: 200px;
	    margin: 0 5px 5px 0;
	}
</style>
